<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录案例 v-if  v-else  v-show</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="isTrue">
				<label for="uesrname">用户账号</label>
				<input type="text"  id="uesrname" placeholder="用户账号" key="usname" />
			</span>
			<!-- 加一个key作用就是不复用  元素就是原来输入的内容 经过切换之后会刷新不再 -->
			<span v-else>
				<label for="uesrnames">邮箱账号</label>
				<input type="text"  id="uesrnames" placeholder="邮箱账号" key="emial" />
			</span>
			<button type="button" @click="isTrue = !isTrue" >切换账号登录</button>
		</div>
		<script type="text/javascript">
		/* v-show 与v-if区别
			1.v-show与v-if用法差不多 
			例如：v-if = true
				v-show= true结果一样
			区别：
			v-if如果为假 则值全部消失 不会存在dom中
			v-show如果为假  则值还存在  还存在dom中 只是加了一个样式  style="display"隐藏了
			2.当要在隐藏和显示中来回切换时候我们使用v-show
			如果只切换一次 则我们使用v-if
		 */
			var app = new Vue({
				el:'#app',
				data:{
					isTrue:true
				},
				
				methods:{
				
				}
			});
		</script>
	</body>
</html>
